

<template>
  <!--封装一个公共的分页插件-->
  <!-- 相关说明
  current-page：当前展示页页码，通常给一个莫认值
  page-sizes：指定可选每页展示的数据条数
  page-size：每页默认页大小 可以作为一个参数传递进来
  total:总数据量，通常作为一个参数传递进来

  @size-change：页大小改变时触发该事件得到回调
  @current-change：发生当前页跳转时触发该事件

  :page-sizes="[10, 20, 30, 50]" 目前不支持切页配置
  layout="total,sizes, prev, pager, next, jumper"
  -->
  <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"  
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
    export default {
        name: 'Pagination',
        //通过接口查询情况传递相关参数
        props:{
            pageSize:{
                type: Number,
                default: 1
            },
            total:{
                type: Number,
                default: 1
            }
        },
        data() {
            return {
                currentPage: 1
            };
        },
        methods:{
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.$emit("PageSizeChange",val)
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                //将点击的页码发送给列表
                this.$emit('CurrentPageChange',val)
            }
        }
    }
</script>

<style>
.pagination{
    padding: 10px;
}
</style>